import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import HomeBanner from './c-cpns/home-banner'
import { HomeWrapper } from './style'
import { fetchHomeDataAction } from '@/store/modules/home'
import HomeSectionV1 from './c-cpns/home-section-v1'
import HomeSectionV2 from './c-cpns/home-section-v2'
import HomeSectionV3 from './c-cpns/home-section-v3'
import { isEmptyObject } from '@/utils'
import HomeLongfor from './c-cpns/home-longfor'
import { changeHeaderConfigAction } from '@/store/modules/main'

const Home = memo(() => {
    // 从redux中获取数据
    const {
        goodPriceInfo,
        highScoreInfo,
        discountInfo,
        recommendInfo,
        longforInfo,
        plusInfo
    } = useSelector((state) => ({
        goodPriceInfo: state.home.goodPriceInfo,
        highScoreInfo: state.home.highScoreInfo,
        discountInfo: state.home.discountInfo,
        recommendInfo: state.home.recommendInfo,
        longforInfo: state.home.longforInfo,
        plusInfo: state.home.plusInfo
    }), shallowEqual)

    // 发起进行的网络请求
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(fetchHomeDataAction())
        dispatch(changeHeaderConfigAction({ isFixed: true, topAlpha: true }))
    }, [dispatch])

    return (
        <HomeWrapper>
            <HomeBanner />
            <div className="content">
                {/* 折扣数据--热门目的地 */}
                {isEmptyObject(discountInfo) && <HomeSectionV2 infoData={discountInfo} />}
                {/* 热门推荐--精彩之地 */}
                {isEmptyObject(recommendInfo) && <HomeSectionV2 infoData={recommendInfo} />}
                {/* 可能想去 */}
                {isEmptyObject(longforInfo) && <HomeLongfor infoData={longforInfo} />}
                {/* 高性价比房源 */}
                {isEmptyObject(goodPriceInfo) && <HomeSectionV1 infoData={goodPriceInfo} />}
                {/* 高分好评房源 */}
                {isEmptyObject(highScoreInfo) && <HomeSectionV1 infoData={highScoreInfo} />}
                {/* Plus房源 */}
                {isEmptyObject(plusInfo) && <HomeSectionV3 infoData={plusInfo} />}
            </div>
        </HomeWrapper>
    )
})

export default Home